<template>
  <div>
    <!-- top选择部分 -->
    <el-row class="content-top">
      <el-col :span="24">
        <span class="span">时间</span>
        <el-select v-model="time" @change="handleFilter" placeholder="请选择"
          size="mini">
          <el-option
            v-for="item in optionsTime"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>

        <span class="span">来源</span>
        <el-select v-model="source" @change="handleFilter" placeholder="请选择"
          size="mini">
          <el-option
            v-for="item in optionsSource"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>

        <span class="span">严重程度</span>
        <el-select v-model="severity" @change="handleFilter" placeholder="请选择"
          size="mini">
          <el-option
            v-for="item in optionsSeverity"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>

        <el-input placeholder="请输入名称" v-model="content"
          class="input-with-select"
          size="mini"
          @keyup.enter.native="handleFilter">
          <el-button @click="handleFilter" slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </el-col>
    </el-row>
    <!-- echarts图表 -->
    <transition name="slide-fade">
      <el-row class="echarts" v-show="show" :gutter="20">
        <el-col id="col-1" :span="10" style="height: 100%;">
          <div id="mainleft222" style="height: 300px;width: 100%;"></div>
        </el-col>
        <el-col :span="7" style="height: 100%;">
          <div id="mainmiddle222" style="height: 300px;width: 100%;"></div>
        </el-col>
        <el-col :span="7" style="height: 100%;">
          <div id="mainright222" style="height: 300px;width: 100%;"></div>
        </el-col>
      </el-row>
    </transition>
    <el-row>
      <el-col class="content-icon">
        <div :class="[this.show === true ? 'el-icon-caret-top icon' : 'el-icon-caret-bottom icon']" @click="showEcharts"></div>
      </el-col>
    </el-row>

    <el-row>
      <!-- 状态按钮 -->
     <el-col>
       <el-dropdown trigger="click" @command="handleDropdown">
        <el-button type="primary"
          :disabled="iSdisabled"
          size="mini">
          修改状态<i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
        <el-dropdown-menu class="dropdownMenu" slot="dropdown">
          <el-dropdown-item command="未确认">未确认</el-dropdown-item>
          <el-dropdown-item command="待处理">待处理</el-dropdown-item>
          <el-dropdown-item command="处理中">处理中</el-dropdown-item>
          <el-dropdown-item command="已关闭">已关闭</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
     </el-col>
     <!-- 表格 -->
      <el-col>
        <cs-table :table-data="currentTableData"
                  :table-label="tableLabel"
                  @handleButton="handleButton"
                  @handleSortChange="handleSortChange"
                  @handleSelectionChange="handleSelectionChange"
                  :table-option="tableOption"
                  class="table Tables">
          <template slot="lastTime" slot-scope="scope">
            <span class="time-span" @click="goTestPage(scope.row.ids, scope.row.occurrence, scope.row.lastTime, scope.row.name, scope.row.details)">{{scope.row.lastTime}}</span>
          </template>
          <template slot="name" slot-scope="scope">
            <span class="time-span" @click="goTestPage(scope.row.ids, scope.row.occurrence, scope.row.lastTime, scope.row.name, scope.row.details)">{{scope.row.name}}</span>
          </template>
          <template slot="details" slot-scope="scope">
            <span class="time-span" @click="goTestPage(scope.row.ids, scope.row.occurrence, scope.row.lastTime, scope.row.name, scope.row.details)">{{scope.row.details}}</span>
          </template>
          <template slot="deviceIp" slot-scope="scope">
            <div class="time-span IPspan" @click="goDetailPage(scope.row.assetName)">{{scope.row.assetName}}</div>
            <div>{{scope.row.deviceIp}}</div>
          </template>
        </cs-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNo"
          :page-sizes="[20, 30, 50, 60]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="allTotalNum">
        </el-pagination>
      </el-col>
    </el-row>
    <!-- 抽屉 -->
    <test-drawer ref="testDrawerRef"></test-drawer>
    <details-drawer ref="detailsDrawerRef"></details-drawer>
  </div>
</template>

<script>
import { all, allUpdate } from '@/api/alarm/all.js'
import echarts from 'echarts'
import CsTable from '@/components/cs-table'
import testDrawer from './testDrawer.vue'
import detailsDrawer from './detailsDrawer.vue'
export default {
  props: {
    allTotalNum: {
      type: Number,
      default: 0
    },
    allCurrentTableData: {
      type: Array
    },
    leftLineData: {
      type: Array
    },
    middlePieData: {
      type: Array
    },
    rightBarData: {
      type: Array
    }
  },
  data() {
    return {
      optionsTime: [
        { value: '1w', label: '最近1周' },
        { value: '1m', label: '最近1月' }
      ],
      optionsSource: [
        { value: '', label: '不限' },
        { value: '关联分析', label: '关联分析' },
        { value: '自身监控', label: '自身监控' }
      ],
      optionsSeverity: [
        { value: '', label: '不限' },
        { value: '一般', label: '一般' },
        { value: '中级', label: '中级' },
        { value: '严重', label: '严重' }
      ],
      time: '1w',
      source: '',
      severity: '',
      content: '',
      currentTableData: this.allCurrentTableData,
      tableLabel: [
        { label: '最后发生的时间', param: 'lastTime', align: 'center', sortable: true, isShow: true, width: '180', slot: true },
        { label: '名称', param: 'name', align: 'center', isShow: true, width: '150', slot: true },
        { label: '详情', param: 'details', align: 'center', sortable: false, isShow: true, slot: true },
        { label: '严重程度', param: 'severity', align: 'center', sortable: false, isShow: true, width: '100' },
        { label: '发生次数', param: 'occurrence', align: 'center', sortable: false, isShow: true, width: '100' },
        { label: '设备IP', param: 'deviceIp', align: 'center', sortable: false, isShow: true, width: '120', slot: true },
        { label: '设备类型', param: 'deviceType', align: 'center', sortable: false, isShow: true, width: '100' },
        { label: '状态', param: 'status', align: 'center', sortable: false, isShow: true, width: '100' },
        { label: '来源', param: 'source', align: 'center', sortable: false, isShow: true, width: '100' }
      ],
      tableOption: {
        label: '详情',
        width: '120',
        options: [
          { label: '详情', type: 'primary', size: 'mini', icon: 'el-icon-document', methods: 'audit', auth: 'sys:group:update' }
        ]
      },
      pageNo: 1,
      pageSize: 20,
      total: this.allTotalNum,
      show: true,
      Ids: [],
      // ids: [],
      // 左边折线图初始数据
      optionLeft: {
        backgroundColor: '#fff',
        toolbox: {
          feature: {
            saveAsImage: {
              type: 'png'
            }
          }
        },
        title: {
          textStyle: {
            fontSize: 12,
            color: '#878787'
          },
          text: '告警趋势统计',
          left: 'left'
        },
        tooltip: { // 鼠标悬浮弹出提示框
          trigger: 'axis', // 提示框弹出的触发时间，折线图和柱状图为axis
          formatter: '{a} <br/>{b} : {c}'// 提示框提示的信息，{a}series内的名字，{b}为块状的名字，{c}为数值
        },
        grid: { // 统计图距离边缘的距离
          top: '15%',
          left: '7%',
          right: '5%',
          bottom: '10%'
        },
        xAxis: [{ // x轴
          type: 'category', // 数据类型为不连续数据
          boundaryGap: false, // 坐标轴两边是否留白
          axisLine: { // 坐标轴轴线相关设置。数学上的x轴
            show: true,
            lineStyle: {
              color: '#333' // x轴颜色
            }
          },
          axisLabel: { // 坐标轴刻度标签的相关设置
            textStyle: {
              color: '#333'
            }
          },
          axisTick: { show: true }, // 刻度点数轴
          data: []
          // data: ['1', '2', '3', '4', '5', '6', '7']
        }],
        yAxis: [{ // y轴的相关设置
          type: 'value', // y轴数据类型为连续的数据
          min: 0, // y轴上的刻度最小值
          // max: 10, // y轴上的刻度最大值
          splitNumber: 7, // y轴上的刻度段数
          splitLine: { // y轴上的y轴线条相关设置
            show: true,
            lineStyle: {
              color: '#dcdcdc'
            }
          },
          axisLine: { // y轴的相关设置
            show: true,
            lineStyle: {
              color: '#333' // y轴颜色
            }
          },
          axisLabel: { // y轴的标签相关设置
            textStyle: {
              color: '#333'
            }
          },
          axisTick: { show: true } // 刻度点数轴
        }],
        series: [{
          name: '告警趋势统计',
          type: 'line', // 统计图类型为折线图
          smooth: true, // 是否平滑曲线显示
          symbolSize: 0, // 数据点的大小，[0,0]// b表示宽度和高度
          lineStyle: { // 线条的相关设置
            normal: {
              color: '#3deaff' // 线条颜色
            }
          },
          areaStyle: { // 区域填充样式
            normal: {
              // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(61,234,255, 0.9)' },
                { offset: 0.9, color: 'rgba(61,234,255, 0.3)' }
              ], false),
              shadowColor: 'rgba(53,142,215, 0.9)', // 阴影颜色
              shadowBlur: 20 // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
            }
          },
          data: []
          // data: [0, 0, 0, 7, 9, 1]
        }]
      },
      // 中间饼图数据
      optionmiddle: {
        toolbox: {
          feature: {
            saveAsImage: {
              type: 'png'
            }
          }
        },
        title: {
          text: '告警等级统计',
          textStyle: {
            fontSize: 12,
            color: '#878787'
          }
        },
        backgroundColor: '#fff',
        tooltip: {
          trigger: 'item',
          // formatter: '{a} <br/>{b} : {c} ({d}%)',
          formatter: '{b} : {c} ({d}%)'
        },
        series: [
          {
            name: '来源',
            type: 'pie',
            radius: '55%',
            center: ['50%', '50%'],
            data: [],
            // data: [
            //   { value: 1, name: 'Top10话题' },
            //   { value: 1, name: 'Top10意外话题' },
            //   { value: 1, name: '话题意外' }
            // ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      },
      // 右边条形图初始数据
      optionright: {
        toolbox: {
          feature: {
            saveAsImage: {
              type: 'png'
            }
          }
        },
        title: {
          text: '告警IP统计',
          textStyle: {
            fontSize: 12,
            color: '#878787'
          }
        },
        backgroundColor: '#fff',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          bottom: '5px'
        },
        grid: {
          left: '3%',
          right: '5%',
          top: '12%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          splitLine: {
            lineStyle: {
              type: 'dashed'
            }
          }
        },
        yAxis: {
          type: 'category',
          data: []
        },
        series: [{
          type: 'bar',
          itemStyle: {
            color: '#3aa0ff'
          },
          barWidth: '20px',
          data: []
        }]
      }
    }
  },
  components: {
    CsTable,
    testDrawer,
    detailsDrawer
  },
  computed: {
    iSdisabled() {
      return this.Ids.length === 0
    }
  },
  watch: {
    leftLineData: {
      handler(newValue, oldValue) {
        let that = this
        if (newValue !== oldValue) {
          that.leftEcharts()
        }
      },
      immediate: true
    },
    middlePieData: {
      handler(newValue, oldValue) {
        let that1 = this
        if (newValue !== oldValue) {
          that1.middleEcharts()
        }
      },
      immediate: true
    },
    rightBarData: {
      handler(newValue, oldValue) {
        let that = this
        if (newValue !== oldValue) {
          that.rightEcharts()
        }
      },
      immediate: true
    },
    allCurrentTableData: {
      handler(newValue, oldValue) {
        let that = this
        if (newValue !== oldValue) {
          that.currentTableData = newValue
        }
      },
      immediate: true
    }
  },
  methods: {
    // 顶部过滤选择范围
    handleFilter() {
      const data = {
        status: '',
        time: this.time,
        source: this.source,
        severity: this.severity,
        content: this.content,
        pageNo: this.pageNo,
        pageSize: this.pageSize
      }
      this.$emit('filter', data, 'all')
    },
    // eCharts区域, 左边折线图
    leftEcharts() {
      this.optionLeft.xAxis[0].data = this.leftLineData.reverse().map(item => {
        return item.name
      })
      this.optionLeft.series[0].data = this.leftLineData.map(item => {
        return item.value
      })
      setTimeout(() => {
        let leftdom = document.getElementById('mainleft222')
        let leftChart = echarts.init(leftdom)
        leftChart.setOption(this.optionLeft)
        window.addEventListener('resize', () => {
          leftChart.resize()
        })
      }, 500)
    },
    // 中间饼图
    middleEcharts(data) {
      if (this.middlePieData.length !== 0) {
        this.optionmiddle.series[0].data = this.middlePieData
      } else {
        const array = [
          { name: '无数据', value: '0' }
        ]
        this.optionmiddle.series[0].data = array
      }
      setTimeout(() => {
        let middledom = document.getElementById('mainmiddle222')
        let middleChart = echarts.init(middledom)
        middleChart.setOption(this.optionmiddle)
        window.addEventListener('resize', () => {
          middleChart.resize()
        })
      }, 500)
    },
    // 右边柱状图
    rightEcharts(data) {
      if (this.rightBarData.length !== 0) {
        this.optionright.yAxis.data = this.rightBarData.map(item => {
          return item.name
        })
        this.optionright.series[0].data = this.rightBarData.map(el => {
          return el.value
        })
      } else {
        const arrayBar = [
          { name: '无数据', value: '0' }
        ]
        this.optionright.yAxis.data = arrayBar.map(item => {
          return item.name
        })
        this.optionright.series[0].data = arrayBar.map(el => {
          return el.value
        })
      }
      setTimeout(() => {
        let rightdom = document.getElementById('mainright222')
        let rightChart = echarts.init(rightdom)
        rightChart.setOption(this.optionright)
        window.addEventListener('resize', () => {
          rightChart.resize()
        })
      }, 500)
    },
    // 表格区域 // 修改状态按钮
    handleDropdown(command) {
      const data = {
        status: command,
        ids: this.Ids
      }
      allUpdate(data).then((res) => {
        if (res.code === 200) {
          this.getAllTableData()
          this.$emit('upDate', command)
        }
      })
    },
    // 获取表格数据
    getAllTableData() {
      const filterData = {
        status: '',
        time: this.time,
        source: this.source,
        severity: this.severity,
        content: this.content,
        pageNo: this.pageNo,
        pageSize: this.pageSize
      }
      all(filterData).then((res) => {
        if (res.code === 200) {
          this.currentTableData = res.data.rows
          // this.total = res.data.totalRows
        }
      })
    },
    // 点击跳转详情页面
    goTestPage(ids, number, lastTime, name, detailName) {
      this.$refs.testDrawerRef.init(true, ids, number, lastTime, name, detailName)
    },
    // 点击跳转设备Ip详情页
    goDetailPage(assetName) {
      this.$refs.detailsDrawerRef.init(true, assetName)
    },
    // 点击跳转详情页面
    handleButton(val) {
      this.goTestPage(val.row.ids, val.row.occurrence, val.row.lastTime, val.row.name, val.row.details)
    },
    handleSortChange() {
    },
    // 多选操作
    handleSelectionChange(val) {
      this.Ids = val.map(item => {
        return item.id
      })
    },
    // 分页监听
    handleSizeChange(newSize) {
      this.pageSize = newSize
      this.getAllTableData()
    },
    handleCurrentChange(newPage) {
      this.pageNo = newPage
      this.getAllTableData()
    },
    // 控制Echarts区域显示隐藏
    showEcharts() {
      this.show = !this.show
    }
  }
}
</script>

<style scoped>
  .conent-row {
    padding-left: 15px;
  }
  .el-select {
    width: 110px;
    margin-right: 15px;
  }
  .span {
    font-size: 13px;
    margin-right: 5px;
  }
  .input-with-select {
    width: 300px;
  }
  .table {
    margin: 10px 0;
  }
  .time-span {
    cursor: pointer;
  }
  .IPspan {
    text-decoration: underline;
  }
  .content-top {
    margin-bottom: 10px;
  }
  .echarts {
    height: 35%;
    margin-bottom: 5px;
  }
  .content-icon {
    display: flex;
    justify-content: center;
  }
  .content-icon .icon {
    width: 100px;
    height: 18px;
    line-height: 18px;
    background-color: #d3d3d3;
    text-align: center;
    margin: 0 auto;
    cursor: pointer;
    border-radius: 3px;
    color: #fff;
  }
  .el-dropdown-menu .el-dropdown-item {
    width: 200px !important;
  }
  /* 可以设置不同的进入和离开动画 */
  /* 设置持续时间和动画函数 */
  .slide-fade-enter-active {
    transition: all .4s ease;
  }
  .slide-fade-leave-active {
    /* transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0); */
    transition: all .25s ease;
  }
  .slide-fade-enter, .slide-fade-leave-to
  /* .slide-fade-leave-active for below version 2.1.8 */ {
    transform: translateX(10px);
    opacity: 0;
  }
</style>
